{template 'tpl_header'}

<div class="weui-tab">
    <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            {loop $regions $region}
            <div class="swiper-slide">
                <div class="destination-nav">
                    <div data-rid="{$region['id']}"
                         class="{if $region['id'] == $regions[0]['id']}destination-nav_on{else}destination-nav_no{/if}">
                        {$region['name']}
                    </div>
                </div>
            </div>
            {/loop}
        </div>
    </div>
    <div class="destination-list">
        {loop $dests_list $dests}
        <div class="weui-flex weui-flex__col3">
            {loop $dests $dest}
            {if !empty($dest) }
            <a href="{php echo url('entry', array('m' => 'vj_bontrip','do' => 'single','id' => $dest['id']),true); }"
               class="weui-flex__item">
                <div class="weui-flex__col3__style1">
                    <img src="{php echo tomedia($dest['thumb'])}">
                    <p>{$dest['name']}</p>
                </div>
            </a>
            {else}
            <a href="javascript:;" class="weui-flex__item">

            </a>
            {/if}
            {/loop}
        </div>
        {/loop}
    </div>
</div>

{template 'tpl_footer'}
<script src="{MOBILE_RES}js/swiper.min.js"></script>
<script>
    $(function () {
        $(".swiper-container").swiper({
            slidesPerView: 3.5,
            loopedSlides: 8,
            freeMode: true,
            freeModeMomentumBounce: false

        });
        $('.swiper-slide').click(function () {
            $(this).find('.destination-nav div').removeClass('destination-nav_on');
            var r_id = $(this).find('.destination-nav div').attr('data-rid');
            $('.swiper-slide .destination-nav .destination-nav_on').addClass('destination-nav_no');
            $('.swiper-slide .destination-nav .destination-nav_on').removeClass('destination-nav_on');
            $(this).find('.destination-nav div').removeClass('destination-nav_no');
            $(this).find('.destination-nav div').addClass('destination-nav_on');
            var data = {
                'action': 'destination_list',
                'r_id': r_id
            };
            $.ajax({
                url: "{php echo $this->createMobileUrl('ajax')}",
                type: 'post',
                data: data,
                dataType: 'json',
                success: function (res) {
                    $('.destination-list').empty();
                    var status = res.status;
                    if (res.status == 1) {
                        add_dest(res.data);
                    } else {
                        $.toast(res.msg, "cancel");
                    }

                },
                error: function (res) {
                    $.toast('请求失败，请检测网络或联系客服', "cancel");
                }
            });
        });

    });

    function add_dest(list) {
        var html = '';
        for (li in list) {
            html += '<div class="weui-flex weui-flex__col3">\n';
            for (dest in list[li]) {
                if (list[li][dest] != null) {
                    var url = "{php echo url('entry', array('m' => 'vj_bontrip','do' => 'single'),true); }";
                    url += "&id=" + list[li][dest].id;
                    html += '            <a href="' + url + '" class="weui-flex__item">\n' +
                        '                <div class="weui-flex__col3__style1">\n' +
                        '                    <img src="' + list[li][dest].thumb + '">\n' +
                        '                    <p>' + list[li][dest].name + '</p>\n' +
                        '                </div>\n' +
                        '            </a>\n';
                } else {
                    html += '            <a href="javascript:;" class="weui-flex__item">\n' +
                        '            </a>\n';
                }
            }
            html += '</div>';
        }
        $('.destination-list').append(html);
    }
</script>